<template>
    <div class="layout">
        <div class="layout" ref="MapView">
            <div class="control">
                <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                    <Radio label="2D"></Radio>
                    <Radio label="3D"></Radio>
                </RadioGroup>
            </div>

        </div>
    </div>
</template>
<script>

import simpleMap from '../../components/simpleMap';

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]


var _Element = null;
// 随机函数
function randomNum(min, max) {
    return parseFloat(Math.random() * (max - min + 1) + min, 10);
}
export default {
    data() {
        return {
            SenceMode: '2D'
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        this.changeSenceMode('3D');
        map.flytochina();


        
        _Element = new simpleMap.ElementDataSource(map);

        // // 创建折线元素
        _Element.add('annulus', {
            id: 'annulus',
            point: { longitude: 115.0, latitude: 37.0 },
            InsideRadius: 100000,
            OutsideRadius: 200000,
            color: '#DD00DDCC', // 颜色
        })

        // // 创建折线元素
        _Element.add('annulus', {
            id: 'annulus2',
            point: { longitude: 115.0, latitude: 37.0 },
            InsideRadius: 50000,
            OutsideRadius: 100000,
            color: '#DDEECCCC', // 颜色
        })
        _Element.add('annulus', {
            id: 'annulus3',
            point: { longitude: 115.0, latitude: 37.0 },
            InsideRadius: 25000,
            OutsideRadius: 50000,
            color: '#00EECCCC', // 颜色
        })
        _Element.add('annulus', {
            id: 'annulus5',
            point: { longitude: 115.0, latitude: 37.0 },
            InsideRadius: 0,
            OutsideRadius: 25000,
            color: '#FFFF00CC', // 颜色
        })


        // 按照实际距离显示 (也是就是指定点贴图) (单位：米)
        _Element.add('icon', {
            id: 'Icon2',
            point: { longitude: 115.0, latitude: 37.0 },  // 图像中心
            image: {
                size: { width: 32, height: 32 },
                // Offset: [20, 20], // 偏移量 单位：像素 
                color: '#FF0000',// 图标染色
                url: '/image/10-7100-0.png',
            },
            label: {
                text: 'AAA',
                fontSize: 16,
                color: '#FFFFFF',
                rotation: Cesium.Math.toRadians(this.rotation),
                BGColor: '#000000AA',  // 文字背景颜色
                offset: [0, -32],  // 偏移量 单位：像素
                horizontal: 'CENTER', // 横向对齐属性  LEFT  /  RIGHT  / CENTER
                vertical: 'CENTER'  // 纵向对齐属性  TOP /  BOTTOM  /  CENTER
            }
        });

    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        },
    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.MapView {
    width: 100%;
    height: 100%;
}

.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}

.title {
    color: #fff;
}

.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}

.itemBox {
    margin-bottom: 5px;
}
</style>